<template>
  <div class="index-container" style="display: flex;overflow-y:auto">
    <ResizeBox style="width: 23%;height: 3.5rem">
      <Flow></Flow>
    </ResizeBox>
    <ResizeBox style="width: 23%;height: 2.5rem">
      <FlowDrive></FlowDrive>
    </ResizeBox>
    <ResizeBox style="width: 23%;height:2.5rem">
      <FlowCar></FlowCar>
    </ResizeBox>
    <ResizeBox style="width: 23%;height: 2.37rem">
      <FlowBoundary></FlowBoundary>
    </ResizeBox>
    <ResizeBox style="width: 23%;height: 2.5rem">
      <FlowChannel></FlowChannel>
    </ResizeBox>
    <ResizeBox style="width: 50%;;height: 2.8rem">
      <FlowBoundaryDetail></FlowBoundaryDetail>
    </ResizeBox>
    <ResizeBox style="width: 50%;height: 3rem">
      <FlowChannelDetail></FlowChannelDetail>
    </ResizeBox>

    <ResizeBox style="width: 23%;height: 2.37rem">
      <Event></Event>
    </ResizeBox>
    <ResizeBox style="width: 23%;height: 4rem">
      <EventList></EventList>
    </ResizeBox>
    <ResizeBox style="width: 23%;height: 4rem">
      <EventSudden></EventSudden>
    </ResizeBox>
    <ResizeBox style="width: 23%;height:4rem">
      <EventPlan></EventPlan>
    </ResizeBox>
    <ResizeBox style="width: 23%;height: 5rem">
      <EventDetail></EventDetail>
    </ResizeBox>
    <ResizeBox style="width: 50%;height: 5rem">
      <EventRelatedDetail></EventRelatedDetail>
    </ResizeBox>

    <ResizeBox style="width: 23%;height: 2.37rem">
      <ServiceArea></ServiceArea>
    </ResizeBox>
    <ResizeBox style="width: 23%;height: 3rem">
      <ServiceAreaList></ServiceAreaList>
    </ResizeBox>
    <ResizeBox style="width: 50%;height: 3rem">
      <ServiceAreaDetail></ServiceAreaDetail>
    </ResizeBox>

  </div>
</template>

<script>
export default {
  name: 'Index'
}
</script>
<script setup>

import Flow from '../business-component/modules/flow/index.vue';

import FlowDrive from '../business-component/modules/flow-drive/index.vue';
import FlowCar from '../business-component/modules/flow-car/index.vue';
import FlowBoundary from '../business-component/modules/flow-boundary/index.vue';
import FlowChannel from '../business-component/modules/flow-channel/index.vue';
import FlowBoundaryDetail from '../business-component/modules/flow-boundary-detail/index.vue';
import FlowChannelDetail from '../business-component/modules/flow-channel-detail/index.vue';
import Event from '../business-component/modules/event/index.vue';
import EventList from '../business-component/modules/event-list/index.vue';
import EventSudden from '../business-component/modules/event-sudden/index.vue';
import EventPlan from '../business-component/modules/event-plan/index.vue';
import EventDetail from '../business-component/modules/event-detail/index.vue';
import EventRelatedDetail from '../business-component/modules/event-related-detail/index.vue';
import ServiceArea from '../business-component/modules/service-area/index.vue';
import ServiceAreaList from '../business-component/modules/service-area-list/index.vue';
import ServiceAreaDetail from '../business-component/modules/service-area-detail/index.vue';

import ResizeBox from '../business-component/components/detail/ResizeBox.vue';

</script>

<style lang="less">
#test {
  height: 60vh;
  width: 500px;
}

.index-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;

}

.index-container>div {
  flex: none !important;
  margin: 8px;
}

.resize-box>div {
  width: 100%;
  height: 100%;
}
</style>
